Vireo

Vireo

Vireo is a mobile app aiming to assist plant lovers, of all skill levels, in caring for their green friends, at any stage of growth. Users will have the ability to identify their plants, chat with experts, and follow care schedules specific to each plant.

Problem Statement

Plant lovers need a way to identify and gain knowledge on the specific plants they already have, as well as, the types of plants that fit their home best, because they want to see their plants thrive.

We will know this to be true when we see plant lovers using our app on a daily basis to successfully care for their plants.

Competitive Analysis

I started with conducting a competitive analysis and UX analysis on two existing apps, Planta and Smart Plant Home. This allowed me to get a better understanding of the current market — highlighting what is successful and where there is room for improvement. Overall, I discovered that existing products lacked a personalized experience, required a subscription for the majority of the features, and because many popular plant care apps are iOS only, there is opportunity for a new app that is Android focused.

View full competitive analyses and UX analysis here.

Planta SWOT analysis

Smart Plant Home UX analysis

Interviews & Surveys

I sent out a survey and conducted 3 user interviews keeping these research goals in mind: identify how much key information plant parents know about their plants, determine common pain points in taking care of houseplants and where they turn to find help, and determine what features potential users would find helpful. I asked questions like: How do you choose a plant for your home? What frustrates you the most about caring for plants? Here are some of the findings that were recognized through affinity mapping:

(1) No existing houseplant care app has a successful marketing strategy, so potential users haven’t heard of any to use.

(2) People who choose plants off of aesthetic often don’t know key information, so they struggle to care for them.

(3) Users get annoyed when they have to make payments throughout the experience, so they prefer a one-time fee or subscription.

(4) Turning to Google for help gives users a variety of answers that may lead them to the wrong solution, so they need an expert’s advice.

(5) Not having a set care schedule causes potential users to forget to care for their plants, so they need something to follow.

View full user research analysis here.

Affinity map

Personas

Taking what I discovered from the user interviews and surveys, I identified three target audiences — Kristen (26) the beginner, Vanessa (34) the struggling plant parent, and Evan (24) the forgetful plant lover. Creating these personas encouraged me to emphasize with potential users and prioritize based on their needs.

View personas here.

Kristen's persona

User Journeys & Flows

Based on Vireo’s target audiences, I defined a set of core features to help potential users accomplish their goals — identify a plant, chat with an expert, and follow a personalized care schedule. In order to visualize the process of accomplishing these goals, I created user journeys. User flows were then created to, one, identify the screens needed for the process, and two, to ensure that I am thinking of how the product flows as a whole, rather than giving too much focus to individual screens.

View user journeys and flows here.

Kristen's user journey

Kristen's user flow

Information Architecture

Taking the user flows I created, I developed an initial sitemap. Later, an open card sort revealed that potential users associated the identify a plant and search features together under “Add a plant.” While this pairing seemed to make sense, it proved to be confusing once the product went through usability testing. It was altered again based on user feedback.

View sitemap iterations and card sort results here.

Current sitemap

Wireframes

Using the newly defined structure, low-fidelity wireframes were created to develop the base functionality. Mid-fidelity wireframes followed, which allowed me to focus on placement and basic visuals. It, eventually, came time to flesh out the details with high-fidelity wireframes and UI mockups. This progression highlights iterative design with the help of usability testing, design collaboration, and an accessibility review.

View all wireframes here.

Iterations of the bottom navigation

Usability Testing

A high-fidelity prototype was built and brought to the first round of usability testing. This gave me the opportunity to see how new users would interact with the product and receive feedback based on their experience. Organizing the collected data into a rainbow spreadsheet allowed me to create a visual pattern of the participants' feedback—recognizing which errors were top priority for the overall usability of the product.

Rainbow spreadsheet detail

Usability Test Report // Issue #1

The icons in the navigation caused confusion.

Severity: High

Solution: Label the navigation. Split the search and identify up to hold their own spot in the navigation

Evidence: All 6 participants questioned where, at least, one of the icons took the user. One participant noted that it would have been helpful to have a tutorial for the navigation. Two participants struggled with locating search under the plus sign—one pointed out that she was associating the plus sign with the camera, the other said that it was more intuitive to search from the home screen.

Usability Test Report // Issue #2

Participants struggled to locate the care schedule settings.

Severity: High

Solution: Relocate the care schedule settings to settings.

Evidence: 5 participants struggled to locate the care schedule settings. Two participants were unable to complete the task—one because of a technical issue, the other because of the design. Two participants expected to find the care schedule settings in account. Three participants vocalized that they would want to change the settings for all of their plants at one time.

Usability Test Report // Issue #3

The search icon in the upper right corner was difficult to find.

Severity: Medium

Solution: Have the search bar live at the top, rather than an
expandable search bar.

Evidence: Three participants had trouble finding the search icon in the upper right corner to reveal the expandable search bar. One noted that it blended in with the title too much.

Usability Test Report // Issue #4

A few participants questioned what the notifications were for.

Severity: Low

Solution: Allow users to select what they would like to receive notifications for during onboarding.

Evidence: One participant was unsure what the notifications were for. Another participant questioned whether she would only be reminded of waterings or if she would be reminded for fertilizing and general care, such as, trimming, rotating, etc.

Usability Test Report // Issue #5

A few participants were confused about the function of the calendar icon.

Severity: Medium

Solution: Replace the calendar icon with “Calendar View.”

Evidence: Though it was not linked as a hotspot in this prototype, two participants were unsure what they would be able to accomplish by pressing the calendar icon. One participant expected to find the care schedule settings there.

During these sessions I tracked Key Performance Indicators, specifically looking at Time on Tasks. After making the necessary revisions, I conducted one additional usability test, again tracking the KPI, to verify that the changes were successful. As seen in the chart below, time spent on tasks have decreased on Tasks 1, 2, and 4—we can assume this reflects improvement in the overall user experience, as well. Updates to the navigation were especially successful. One thing I did realize in this session, and as it is shown in the numbers, was that it would be beneficial to reword the third task for future sessions because it appeared to confuse the participant on where to look.

Time on Task comparison

View complete usability test report here.

Preference Testing

Before moving forward with the specifics of the visual design, I sent out a preference test to get a better understanding of what participants preferred regarding style — a combination of photography and vector or solely photography. I made the mistake of testing too many different elements (images, wording, etc.) in the first round, while I should have simply focused on testing photography and vector vs. photography. Though there was a semi-clear winner, by reading the participants’ responses, I realized they were responding more to the specific image used rather than the actual design. With the second test, I revised the two designs to only have the one difference so that participants would respond more to the style. It resulted in a tie, which led to the third, and final, test. I concluded that there needed to be a bigger change between the two designs to really uncover which participants preferred more.

View preference testing results here.

Preference Test #1

Preference Test #3

Designing for Accessibility

I am striving to learn more about designing for accessibility. In order to make Vireo more available to users with physical, visual, aural, oral, and cognitive disabilities, I reviewed the product and made improvements based on the Web Content Accessibility Guidelines (WCAG).

View full accessibility review here.

Accessibility Improvement #1

Accessibility Improvement #2